<template>
  <view style="width: 100%; margin: 10 auto">
    <div class="limit_top">
      <view class="left">
        <text>限时秒杀</text>
        <text style="display: inline-block"
          ><wd-count-down :time="time" :format="format"
        /></text>
      </view>
      <view class="right" @click="golimit">
        <text
          >查看全部 <wd-icon name="arrow-right" size="30rpx"></wd-icon>
        </text>
      </view>
    </div>
    <div class="list_shop">
      <view>
        <scroll-view
          scroll-x="true"
          style="width: 100%; height: 100%; white-space: nowrap"
        >
          <view
            style="
              width: 30%;
              height: 100%;
              display: inline-block;
              margin: 0 20rpx;
            "
            v-for="i in list.slice(0, 10)"
            :key="i._id"
          >
            <div style="display: flex; flex-direction: column">
              <view style="width: 100%; height: 30%; text-align: center">
                <image :src="i.img" mode="" style="height: 150rpx; width: 100%" @click="goShop(i)">
                </image>
                <view
                  class=""
                  style="width: 100%; font-weight: 300; margin-bottom: 10rpx"
                  >{{
                    i.name.length > 4 ? i.name.slice(0, 4) + '...' : i.name
                  }}</view
                >

                <div
                  style="
                    display: flex;

                    margin: 0 auto;
                    width: 80%;
                  "
                >
                  <view style="color: red"
                    >${{ parseFloat(i.price * i.discount).toFixed(2) }}</view
                  >
                  <view
                    class=""
                    style="
                      color: gray;
                      font-weight: 200;
                      text-decoration: line-through;
                    "
                    >${{ i.price }}</view
                  >
                </div>

                <wd-button type="error" size="small" @click="addcart(i)"
                  >加入购物车</wd-button
                >
              </view>
            </div>
          </view>
        </scroll-view>
      </view>
    </div>
  </view>
</template>

<script setup lang="ts" name="limite_time" >
import { ref } from 'vue';
import { addshopcar } from '@/utils/api';
const user_id = ref(localStorage.getItem('user_id'));
import { useMainStore } from '@/store/index';
const shoplist = useMainStore();
import { storeToRefs } from 'pinia';
const { list } = storeToRefs(shoplist);
const format = ref<string>('DD 天 HH 时 mm 分 ss 秒');
const time = ref<number>(30 * 60 * 60 * 1000);


import {useNowShopStore} from "@/store/now_shop"


const nowShopStore = useNowShopStore()
function  goShop(an:any){
	// console.log(an)
	nowShopStore.setShop(an)
	uni.navigateTo({
	  url: "/pages/TypePages/shop_main/shop_main" // 跳转到对应路径的页面
	});
	
}

const golimit = () => {
  uni.navigateTo({
    url: '/pages/IndexPages/index/Limite-time',
  });
};
import { addshopcar } from '@/utils/api';
import { useshopcar } from '@/store/shopcar.ts'; //获取store
const shopcar = useshopcar();
const { shopcarlist } = storeToRefs(shopcar);
const addcart = async (a) => {
  let data = await addshopcar({
    shop_id: a._id,
    user_id: user_id.value,
   
  });
  shopcarlist.value = data.data;
};
</script>

<style lang="scss">
.limit_top {
  width: 100%;
  height: 100rpx;

  display: flex;
  justify-content: space-between;

  .right {
    font-size: 25rpx;
    color: gray;
    display: flex;
  }

  .left {
    font-weight: 600;
    font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
  }
}

.list_shop {
  width: 100%;
  height: 300rpx;
}
</style>